
pagenote-colors{
  position: relative;
  display: inline-block;
  cursor: pointer;
  &:hover{
    pagenote-color-items{
      display: block;
    }
  }
  pagenote-color-items{
    display: none;
    position: absolute;
    top: 20px;
    white-space: nowrap;
    z-index: 1;
    & > pagenote-icon{
      display: inline-block;
      margin-right: -5px;
      width: 16px;
      height: 16px;
      border-radius: 20px;
      box-shadow: -1px 0 0 rgba(0,0,0,0.1), 1px 0 0 rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.2);
      &:hover{
        transform: scale(1.2);
      }
      &[data-active='1']{
        border: 3px solid #ffffff;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
      }
    }
  }
}
